<template>
	<view class="cashMethods">
		<view
			class="methdos_i f f_align f_align_center"
			v-for="(item,index) in cardList"
			:key="index"
			@click="chooseCards(item)"
		>
			<view class="f f_align_center">
				<i v-if="item.cardType == '10014001'" class="iconfont iconlujing4256"></i>
				<i v-else-if="item.cardType == '10014002'" class="iconfont iconjianqu13"></i>
				<i v-else class="iconfont iconzu5670"></i>
				<text>{{$getDict(card_type,item.cardType)}}</text>
				<text class="ml10">({{card_meth_names(item)}})</text>
			</view>
			<i v-if="c_cards.userCardId == item.userCardId" class="iconfont iconzu5501"></i>
			<i v-else class="iconfont iconjianqu21"></i>
		</view>



		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />

		<view class="fixed_btn">
			<view class="biding_btn bold" @click="chooseCardsMeth" v-if="cardList.length >0 && !isLoading">
				{{formWx == '' ? '选择方式' : '选择微信账号'}}
			</view>
			<view class="biding_btn bold" v-else @click="$navTo('../setting/setting')">
				{{formWx == '' ? '去绑卡哦' : '去新增微信账号'}}
			</view>
		</view>
	</view>
</template>

<script>
	import loadMore from '@/components/loadMore/loadMore'
	import { mapState } from 'vuex'
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				isLoading:false,
				isDoneTask:false,

				page:{
					pageIndex:1,
					limit:20,
					totalPage:0
				},
				cardList:[],
				c_cards:{
					userCardId:''
				},

				formWx:''
			};
		},
		computed:{
			...mapState({
				card_type:state=>state.dictArrs.card_type
			})
		},
		onLoad(option) {
			if(option.cardType){
				this.formWx = option.cardType
			}else{
				this.formWx = '';
			}
			console.log(this.formWx)
			this.$store.dispatch('getDictlists','card_type');
		},
		onShow() {
			this.getListCardUser();
		},
		methods:{
			//字段返回
			card_meth_names(item){
				let strs = ''
				if(item.cardType == '10014003'){
					strs = item.bankcardNum;
				}else if(item.cardType == '10014002'){
					strs = item.wxAccount;
				}else{
					strs = item.alipayAccount;
				};
				return '****'+strs.substring(strs.length-4 < 0 ? 0 : strs.length-4,strs.length)
			},
			//查询卡信息
			async getListCardUser(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;

				let res = (await _this.$http('/api/auth/user/card/listUserCard','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit,
					cardType:_this.formWx
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.cardList.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.cardList = _this.cardList.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			chooseCardsMeth(){
				const _this = this;
				if(_this.c_cards.userCardId && _this.c_cards.userCardId != ''){
					if(_this.formWx != '' && _this.c_cards.cardType == '10014002'){
						uni.setStorageSync('wxAccount',_this.c_cards);
					}else{
						uni.setStorageSync('card_meth',_this.c_cards);
					}
					_this.$navBack();
				}else{
					_this.$showToast('先选择一条要提现的方式～')
				}
			},
			chooseCards(item){
				this.c_cards = item;
			}
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.getListCardUser();
		}
	}
</script>

<style lang="scss" scoped>
	.cashMethods{
		padding: 24rpx;
		background-color: #F6F6F6;
		min-height: 100vh;
		.methdos_i{
			padding: 24rpx;
			font-size: 28rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			.iconfont{
				font-size: 36rpx;
				margin-right: 28rpx;
				&.iconjianqu21,&.iconzu5501{
					font-size: 32rpx;
					margin-right: 0;
				}
			}
		}
		.fixed_btn{
			width: 100%;
			box-sizing: border-box;
			@include flex_center;
			position: fixed;
			bottom: 100rpx;
		}
	}
</style>
